<template>
  <div class="import">
    <el-card>
      <h3 class="title">员工导入</h3>
      <el-alert
        show-icon
        title="每次导入仅可添加1000名员工，姓名、手机、入职时间、聘用形式为必填项"
        type="warning"
      >
      </el-alert>
      <!-- 上传组件 -->
      <myexcel :beforeUpload="beforeUpload" :onSuccess="onSuccess"></myexcel>
    </el-card>
  </div>
</template>

<script>
// 导入接口
import { importEmployees } from '@/api/employees'
export default {
  methods: {
    beforeUpload (file) {
      // file : 导入文件的详细信息
      //   console.log(file)
      // 判断上传的文件不能大于 2M
      let less = file.size < 2 * 1024 * 1024
      if (!less) {
        this.mssage.error('文件大小不能大于 2M ， 请重新上传')
      }
      return less
    },
    async onSuccess ({ header, results }) {
      //   console.log(header)
      //   console.log(results)
      let obj = {
        入职日期: 'timeOfEntry',
        姓名: 'username',
        工号: 'workNumber',
        手机号: 'mobile',
        转正日期: 'correctionTime'
      }
      //   替换返回的 results 中的键 (中文替换为对应的英文)
      let newArr = results.map(item => {
        let newObj = {}
        // Object.keys(obj) : ['入职日期', '姓名', '工号', '手机号', '转正日期']
        Object.keys(obj).forEach(value => {
          // obj[value]: 'timeOfEntry'
          // item[value]: '43535'
          if (value === '入职日期' || value === '转正日期') {
            newObj[obj[value]] = this.formatDate(item[value])
          } else {
            newObj[obj[value]] = item[value]
          }
        })
        return newObj
      })
      console.log(newArr)
      //   发请求
      await importEmployees(newArr)
      //  提示
      this.$message.success('批量导入成功')
      // 跳转员工列表页
      this.$router.push('/employees')
    },
    // 时间格式处理函数
    formatDate (days) {
      let timer = (days - 1) * 24 * 60 * 60 * 1000
      let mydate = new Date(timer)

      let year = mydate.getFullYear() - 70
      let month = String(mydate.getMonth() + 1).padStart(2, '0') // 月份只有一位补0
      let day = String(mydate.getDate()).padStart(2, '0') // 天数只有一位补0
      let newDate = `${year}-${month}-${day}`
      //   console.log(newDate)
      return newDate
    }
  }
}
</script>

<style lang="scss" scoped>
.import {
  padding: 20px;
  .title {
    text-align: center;
  }
}
</style>
